<template>
  <PublicPage bgColor="#F5F5F5">
    <view class="bg-white sticky top-0 z-[99]">
      <view class="p-3 border-0 border-b border-solid border-zinc-200">
        <u-search
          v-model="searchData.keyword"
          height="80rpx"
          shape="square"
          placeholder="医生姓名 / 电话"
          :animation="true"
          @search="search"
          @custom="search"
          @clear="search"></u-search>
      </view>
      <u-tabs
        :list="tabsList"
        :scrollable="false"
        :current="tabsCurrent"
        @change="tabsChange"></u-tabs>
    </view>

    <view
      v-for="(item, index) in dataList"
      :key="item.id"
      class="px-3 mx-2 my-3 bg-white rounded-lg"
      @click="goExpertDetail(item)"
      >
      <view class="flex items-center justify-between py-1 borderBottom">
        <view
          class="flex items-center justify-between pt-1 pb-2 fz-12 u-tips-color">
          <view>
            医生入驻申请：
            <text>{{ item.createTime }}</text>
          </view>
        </view>
        <view>
          <u-tag
            :text="getApstatusData(item.apStatus).text"
            size="mini"
            plain
            plainFill
            :type="getApstatusData(item.apStatus).type"
            borderColor="#fff"></u-tag>
        </view>
      </view>

      <UserCard
        :avatar="item.headimg"
        avatar-class="w-10 h-10 rounded-full"
        :userName="item.userName"
        :deptName="item.deptname"
        :postName="item.postName"
        :com="item.com"
        :mobile="item.mobile"
        >
      </UserCard>

      <view class="flex items-center justify-between pt-1 pb-3">
        <view>由<text>{{ item?.submitDeptName}}</text><text class="px-1 u-primary">{{ item.submitName }}</text>提交</view>
        <view v-if="item.apStatus === ExpertApStatusEnum.APPLIED" :class="{'u-error': awaitTime(item.createTime).minute >= 60}">已等待{{ awaitTime(item.createTime).desc }}</view>
      </view>
    </view>

    <Empty v-if="loadStatus === 'nomore' && dataList.length === 0" :type="1" />
    <LoadMore v-else :status="loadStatus" />
  </PublicPage>
</template>

<script setup lang="ts">
import UserCard from '@/components/userCard.vue'
import { usePageList } from '@/hooks/usePageList'
import { apExpert } from '@/api/expert'
import { ApExpertItemTypes } from '@/types/expert'
import { ExpertApStatusEnum } from '@/utils/enums'
import Empty from '@/components/empty.vue'
import LoadMore from '@/components/loadMore.vue'
import { awaitTime } from "@/utils";

const tabsList = ref([
  {
    name: '审核中',
    value: ExpertApStatusEnum.APPLIED
  },
  {
    name: '已通过',
    value: ExpertApStatusEnum.SUCCEED
  },
  {
    name: '已驳回',
    value: ExpertApStatusEnum.ERROR
  },
  {
    name: '我发起的',
    value: ExpertApStatusEnum.INITIATED
  }
])

const tabsCurrent = ref(0) // tabs选中下标
const tabsChange = (val: {
  name: string
  value: ExpertApStatusEnum
  index: number
}) => {
  tabsCurrent.value = val.index
  searchData.type = val.value
  search()

  // h5切换tab滚动到顶部
  // #ifdef H5
  uni.pageScrollTo({
    scrollTop:0,
    duration:200
  })
  // #endif
}

// 查询列表参数
const searchData = reactive({
  keyword: '',
  type: ExpertApStatusEnum.APPLIED
})

// 获取列表
const {
  getList,
  search,
  list: dataList,
  status: loadStatus
} = usePageList<ApExpertItemTypes>((params) =>
  apExpert({ ...params, ...searchData })
)

const getApstatusData = (apStatus: string) => {
  switch (apStatus) {
    case ExpertApStatusEnum.ERROR:
      return {
        text: '已驳回',
        type: 'error'
      }
    case ExpertApStatusEnum.SUCCEED:
      return {
        text: '已通过',
        type: 'primary'
      }
    case ExpertApStatusEnum.APPLIED:
      return {
        text: '平台审核中',
        type: 'success'
      }
    default:
      return {
        text: '未认证',
        type: 'warning'
      }
  }
}

// 跳转审核详情
const goExpertDetail = (item: ApExpertItemTypes) => {
  uni.$u.route({
    type: 'navigateTo',
    url: '/pages/expert/editExport',
    params: {
      id: item.id,
      pageType: 'audit'
    }
  })
}

onLoad(() => {
  getList()
})
// 下拉刷新
onPullDownRefresh(async () => {
  try {
    await search()
    setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 1000)
  } catch (error) {
    uni.stopPullDownRefresh()
  }
})
// 加载更多
onReachBottom(() => {
  getList()
})
</script>

<style lang="scss" scoped></style>
